<script setup>
import { storeToRefs } from 'pinia';
import { useCounterStore } from './stores/counter'
import { onMounted } from 'vue';

const counterStore = useCounterStore()
const {channels} = storeToRefs(counterStore)
const {fetchCount} = counterStore
onMounted(() => {
  fetchCount()
})
</script>
<template>
  <div>
    <h1>{{ counterStore.doubleCount }}</h1>
    <button @click="counterStore.increment">
      count is: {{ counterStore.count }}
    </button>
  </div>
  <div>
    <ul>
      <li v-for="channel in channels" :key="channel.id">
        {{channel.name}}
      </li>
    </ul>
  </div>
</template>
<style scoped>
h1,
a {
  color: #35495e;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style>